<template>
	<view :class="['scollbox',autoHeight?'Auto-height':'']" :style="{paddingTop:offset+'px;'}">
		<scroll-view id="scroll"  :refresher-triggered="triggered" @refresherrefresh="onRefresh"
			@refresherrestore="onRestore" @scrolltolower="scrolltolower" @scroll="scroll" refresher-default-style="black"
			:refresher-enabled="refresh" :scroll-into-view="scrollId" scroll-anchoring="true" :refresher-background="'#f6f6f6'"
			:refresher-threshold="80" :lower-threshold="750" :scroll-y="true" class="scroll-wrap" :style="'height:'+height">
			<slot />
		</scroll-view>
	</view>
</template>

<script>
	export default {
		name: "x-scroll",
		props: {
			fixed: {
				type: Boolean,
				default: false,
			},
			extraheight:{
				type: Number,
				default: 0,
			},
			//向下偏移量,单位rpx
			offset: {
				type: Number,
				default: 0,
			},
			//开启下拉刷新功能
			refresh: {
				type: Boolean,
				default: true,
			},
			scrollId: {
				type: String,
				default: "",
			},
			// 是否开启底部安全距离
			isBottom: {
				type: Boolean,
				default: false
			},
			isNav: { //是否自定义导航栏
				type: Boolean,
				default: true
			},
			heightFix:{ //某些页面特殊高度需要修复
				type:Number,
				default:0,
			},
			//最外围是否自动高度
			autoHeight:{
				type:Boolean,
				default:false
			}
		},
		data() {
			return {
				triggered: true,
				height: '100vh',
			};
		},
		created() {
			uni.$on("triggered", () => {
				setTimeout(() => {
					this.triggered = false;
				}, 1500)

			});
		},
		mounted() {
			let _this = this;
			uni.getSystemInfo({
				success: res => {
					let height
					// #ifdef APP-PLUS
					if (_this.isNav) {
						height = (res.safeAreaInsets.height - res.statusBarHeight - 44 - uni.upx2px(_this.offset) - 2);
						console.log(height);
					} else {
						height = (res.safeAreaInsets.height - uni.upx2px(_this.offset) - 2);
						console.log(height);
					}
					// #endif
					// #ifdef MP-WEIXIN
					if (_this.isNav) {
						height = (res.safeArea.height - res.statusBarHeight - 44 - uni.upx2px(_this.offset) - 2);
						console.log(height);
					} else {
						height = (res.safeArea.height - uni.upx2px(_this.offset) - 2);
						console.log(height);
					}
					// #endif
					if(_this.heightFix != 0){
						height = height + _this.heightFix
						console.log(height);
					}
					_this.height = height+_this.extraheight + 'px'
					console.log('=====');
					console.log(_this.height);
					uni.$emit('scroll_height', height)
				},
				fail(err) {
					console.log(err);
				}
			})

		},
		methods: {
			//下拉刷新
			onRefresh() {
				this.$emit("onRefresh");
				console.log('22');
				this.maau = true;
				setTimeout(() => {
					this.triggered = false;
				}, 500)
			},
			//滚动到底部触发
			scrolltolower() {
				this.$emit("scrolltolower");
			},
			onRestore() {
				this.triggered = "restore";
			},
			scroll(e) {
				this.$emit('scroll', e)
			}
		},
	};
</script>

<style lang="scss" scoped>
	.scollbox{
		height: 100vh;
	}
	.Auto-height{
		height: auto !important;
	}
	.scroll-wrap {
		width: 100%;
		height: 100vh;
	}
	.Auto-ma{
		margin-top: 224rpx;
	}
</style>